import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../../../util/adapt';
import {
  APP_BLACK,
  APP_RED,
  APP_SECOND_GREY
} from '../../../../../../constant/color';
import { CONTENT_WIDTH } from '../../../Discovery/constant';

export default StyleSheet.create({
  haveTeacher: {
    height: phonePx(200)
  },
  container: {
    height: phonePx(138),
    width: CONTENT_WIDTH,
    borderRadius: phonePx(8),
    backgroundColor: '#ffffff',
    paddingTop: phonePx(22),
    paddingRight: phonePx(13),
    paddingBottom: phonePx(22),
    paddingLeft: phonePx(18)
  },
  shadow: {
    height: phonePx(138),
    width: CONTENT_WIDTH,
    shadowColor: 'rgba(136, 136, 136, 0.05)',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 4,
    shadowRadius: 4,
    marginBottom: phonePx(16)
  },
  loadTitle: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  spuTag: {
    marginLeft: phonePx(-20),
    width: phonePx(14),
    height: phonePx(16)
  },
  title: {
    marginLeft: phonePx(8),
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  tagContent: {
    width: phonePx(33),
    height: phonePx(16),
    justifyContent: 'center'
  },
  tag: {
    color: '#FFFFFF',
    fontSize: phonePx(10),
    fontWeight: '500',
    marginLeft: phonePx(4)
  },
  name: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500',
    width: CONTENT_WIDTH - phonePx(36),
    marginTop: phonePx(12)
  },
  time: {
    fontSize: phonePx(12),
    color: APP_SECOND_GREY,
    fontWeight: '500',
    marginTop: phonePx(12)
  },
  loadBottomInfo: {
    marginTop: phonePx(36),
    flexDirection: 'row',
    height: phonePx(52)
  },
  teacherContent: {
    height: phonePx(52),
    minWidth: phonePx(36),
    marginRight: phonePx(10),
    alignItems: 'center'
  },
  teacherIcon: {
    width: phonePx(36),
    height: phonePx(36),
    borderRadius: phonePx(18)
  },
  teacherName: {
    color: '#A3AAB6',
    fontSize: phonePx(10),
    marginTop: phonePx(6)
  },
  info: {
    alignItems: 'flex-end'
  },
  num: {
    fontSize: phonePx(10),
    color: APP_SECOND_GREY,
    fontWeight: '500',
    marginTop: phonePx(6)
  },
  price: {
    fontSize: phonePx(20),
    color: APP_RED,
    fontWeight: '500'
  },
  symbol: {
    fontSize: phonePx(12),
    color: APP_RED,
    fontWeight: '500'
  },
  addContent: {
    width: phonePx(11.3),
    height: phonePx(11.3),
    marginRight: phonePx(10),
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: phonePx(10)
  },
  add: {
    color: '#E8E8E8',
    fontSize: phonePx(13),
    fontWeight: '500'
  },
  studentContent: {
    height: phonePx(52),
    alignItems: 'center'
  },
  all: {
    color: '#A3AAB6',
    fontSize: phonePx(10),
    marginLeft: phonePx(18),
    marginTop: phonePx(22)
  },
  studentList: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  studentIcon: {
    marginRight: phonePx(-12),
    width: phonePx(36),
    height: phonePx(36),
    borderRadius: phonePx(18)
  },
  noTeacher: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: phonePx(14)
  },
  loadGrayLogo: {
    width: phonePx(30),
    height: phonePx(30),
    borderRadius: phonePx(15),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#d8d8d8'
  },
  grayLogo: {
    width: phonePx(18),
    height: phonePx(16)
  },
  noTeacherDesc: {
    marginTop: phonePx(14),
    color: '#A3AAB6',
    fontSize: phonePx(12)
  }
});
